<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poster</title>
    <link rel="stylesheet" href="./lib/style.css">
</head>
<body>
    <div id="app">
        <div class="paper" :style="'--col:'+col+';'">
            <div class="bg">
                <span class="iconfont snow" style="
                left: -60px;top: -31px;font-size: 400px;transform: rotate(21deg);
                ">&#xe6d6;</span>
                <span class="iconfont snow" style="
                right: -100px;top: -85px;font-size: 500px;transform: rotate(9deg);
                ">&#xe6d6;</span>
                <span class="iconfont snow" style="
                left: -162px;top: 276px;font-size: 1026px;transform: rotate(-7deg);
                ">&#xe6d6;</span>
                <span class="iconfont snow" style="
                font-size: 813px;color: #fcd1c0a8; left: 50%;top: 50%; 
                transform: translateX(-418px) translateY(-500px) rotate(-10deg) ;
                ">&#xe6e6;</span>
            </div>
            <div class="paperContext">
                <div class="title">
                    <i class="blue">次元k*</i>&nbsp;<span class="city">辉县</span><i class="red">随舞</i>
                </div>
                <div class="site_date"><i class="date">{{date}}</i> &nbsp;<span class="site">{{site}}</span></div>
                <i class="siteDetail">{{siteDetail}}</i>
                <div class="musicTag"><i>歌曲列表</i>【{{getList.length}}首】</div>
                <div class="list">
                    <div class="listItem" v-for="(item,index) in getList" :key="index" :class="!Math.floor(index/col%2)?'color1':'color2'">{{item}}</div>
                </div>
                <div class="joinBox">
                    <div class="join">
                        <div>歌单征集/档期预告/扩列等</div>
                        <div>请加入随舞交流群：{{joinId}}</div>
                    </div>
                    <img class="ewm" src="./lib/二维码.png" alt="">
                </div>
            </div>
        </div>
        <div class="buttonBox">
            <button @click="showDialog('dialog1')">设置</button>
            <br>
            <button @click="showDialog('dialog2')">歌曲</button>
        </div>
        <dialog ref="dialog1">
            <div class="dialog1">
                <h2>设置属性</h2>
                <div class="row">
                    <label>日期:</label>
                    <input v-model="setting.date" type="text">
                </div>
                <div class="row">
                    <label>位置:</label>
                    <input v-model="setting.site" type="text">
                </div>
                <label>详细位置:</label>
                <textarea style="margin: 4px 0;font-size: 16px;" 
                    v-model="setting.siteDetail" rows="3" cols="40"></textarea>
                <div class="row">
                    <label>群号:</label>
                    <input v-model="setting.joinId" type="text">
                </div>
                <div class="row">
                    <label>群名称:</label>
                    <input v-model="setting.joinName" type="text">
                </div>
                <div class="row">
                    <label>展示列数:</label>
                    <input v-model="setting.col"
                        style="width: 0px;" type="number">
                    <label style="margin-left: 20px;">按字母排序:</label>
                    <input v-model="setting.isSort" type="checkbox"
                        style="height: 20px;width: 0;">
                </div>
                <div class="row">
                    <button @click="dialog1Save()">保存</button>
                    <button @click="closeDialog('dialog1')">取消</button>
                </div>
              </div>
        </dialog>
        <dialog ref="dialog2">
            <textarea cols="50" rows="30" ref="musicList"></textarea>
            <div class="row">
                <button @click="dialog2Save()">保存</button>
                <button @click="closeDialog('dialog2')">取消</button>
            </div>
        </dialog>
    </div>
    
    <script type="module">
        import {createApp,reactive } from './lib/vue3esm.mjs'
        import guHun from './lib/guHun.mjs'
        createApp({
            data(){
                return {
                    str:'',
                    list:[],
                    date:'2月8日',                  // 时间
                    site:'万德隆超市',               // 简略地址
                    siteDetail:'河南省新乡市苏门大道8号西北方向50米',   // 详细地址
                    joinId:'933935872',             // 群号
                    joinName:'次元k/辉县随舞',       // 群名称
                    col:3,   // 列数
                    isSort: true,
                    setting:{}
                }
            },
            computed:{
                getList(){
                    let list = this.str.split(/\r?\n/).filter(line => line.trim().length > 0);
                    if(this.isSort){
                        return list.slice().sort();
                    }else{
                        return list.slice();
                    }
                }
            },
            mounted() {
                let prop;
                if(!localStorage['setting']){
                    prop =  {
                        date: this.date,
                        site: this.site,
                        siteDetail: this.siteDetail,
                        joinId: this.joinId,
                        joinName: this.joinName,
                        col: this.col,
                        isSort: this.isSort
                    };
                    localStorage['setting'] = JSON.stringify(prop);
                }else{
                    prop = JSON.parse(localStorage['setting']);
                }
                for(let key in prop){
                    this[key] = prop[key];
                }
                this.setting = prop;
                if(localStorage['musicList']){
                    let str = localStorage['musicList']
                    this.$refs['musicList'].value = str;
                    this.str = str;
                }
            },
            methods: {
                dialog1Save(){
                    localStorage['setting'] = JSON.stringify(this.setting);
                    for(let key in this.setting){
                        this[key] = this.setting[key];
                    }
                    this.closeDialog('dialog1');
                },
                dialog2Save(){
                    this.str = this.$refs['musicList'].value;
                    localStorage['musicList'] = this.str;
                    this.closeDialog('dialog2');
                },
                showDialog(refName){
                    this.$refs[refName].showModal();
                },
                closeDialog(refName){
                    if(refName=='dialog2'){
                        this.$refs['musicList'].value = localStorage['musicList'] || '';
                    }
                    this.$refs[refName].close();
                }
            },

        }).mount('#app')
    </script>
</body>
</html>